<template>
  <div>
    <div class="navbar">
      <div class="logo">
        <router-link to="/">
          <img src="@/assets/svg/兔子_rabbit.svg" alt="图片消失不见了"/>
          <span>丿丿树 yyds</span>
        </router-link>
      </div>
      <div class="nav-menu">
        <ul class="list">
          <router-link to="/" ><li :class="$route.path === '/home'? 'active' : ''">首页</li></router-link>
          <router-link to="/library"><li :class="$route.path.indexOf('/library') !== -1 ? 'active' : ''">图书馆</li></router-link>
          <router-link to="/onlineWrite"><li :class="$route.path === '/onlineWrite'? 'active' : ''">在线写文档</li></router-link>
          <router-link to="/manual" ><li :class="$route.path === '/manual'? 'active' : ''">使用手册</li></router-link>
          <router-link to="/buildWeb"><li :class="$route.path === '/buildWeb'? 'active' : ''">网站建设</li></router-link>
          <router-link to="/login" v-show="loginFlag === false"><li :class="$route.path === '/login'? 'active' : ''">登录</li></router-link>
          <li v-show="loginFlag === true">{{username}}</li>

        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommonTopBar",
  data() {
    return {
        loginFlag: false,
        username: ''
    }
  },
  methods: {
    showLogin(){
      let user = localStorage.getItem("user")
      if (user != null) {
        this.loginFlag = true;
        this.username = user;
      }else {
        this.loginFlag = false;
      }
    }
  },
  created() {
    this.showLogin();
  }
}
</script>

<style scoped>
.navbar {
  height: 66px;
  line-height: 66px;
  background-color: #fff;
  position: sticky;
  top: 0;
}
.navbar::after {
  display: block;
  content: '';
  clear: both;
}
.navbar .logo {
  float: left;
  margin-left: 20px;
}
.navbar .logo img {
  height: 50px;
  line-height: 66px;
  float: left;
}
.navbar .logo span {
  color: #3284fa;
  font-weight: 600;
  font-size: 20px;
}


.navbar .nav-menu {
  float: right;
  margin-right: 50px;
  user-select: none;
  height: 66px;
  line-height: 66px;
}

.navbar .nav-menu .list {
  display: block;
  content: '';
  clear: both;
  height: 66px;
  line-height: 66px;
}

.navbar .nav-menu .list li {
  float: left;
  margin-left: 35px;
  font-size: 15px;
  height: 66px;
  line-height: 66px;
}

.navbar .nav-menu .list li:hover {
  border-bottom: 3px solid #3284fa;
  cursor: pointer;
}

.active {
  border-bottom: 3px solid #3284fa;
  cursor: pointer;
}




</style>